<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
		<meta http-equiv="Content-Type" content="text/x-component" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>时间轴</title>
		<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

		<style>
		body{
			padding: 0;
			margin:0 auto;

		}
			.slide{
				width: 1200px;
				height: 250px;
				margin-top: 20px;
				margin-left: 100px;
				border:1px #ccc solid;
				text-align: center;
				padding-left:40px;
				position: relative; 
			}
			.slide ul li{
				width:10%;
				height: 180px;
				float: left;
				list-style: none;
				/*border:1px red solid;*/
			}
			.slide-span{
				border:2px blue solid;
				cursor: pointer;
				width: 50px;
				height: 50px;
				line-height: 50px;
				border-radius: 50px;
				vertical-align: middle;
				font-size:30px;
				text-align: center;
			}
			.slide-span:nth-child(1){
				position: absolute;
				left:15px;
				top:81px;
			}
			.slide-span:nth-child(2){
				position: absolute;
				right: 32px;
				top:81px;
			}
			.slide-ul{
				position: relative;
				padding-left: 0px;
				margin-left: 40px;
				
			}
			.slide-ul li{
				position: relative;
				vertical-align: middle;
				text-align: center;

			}
			.line{
				display: inline-block;
				border:5px #ccc solid;
				position: absolute;
				top:90px;
				height: 0px;
				left:5px;
				z-index: -999
			}
			.circle-text{
				width:80px;
				height: 80px;
				border-radius: 80px;
				position: absolute;
				z-index: 999;
				top:30%;
				left:14%;
				border:2px #ccc solid;
				background-color: green
			}
			.showDivTop{
				position: absolute;
				width: 100%;
				height: 40%;
				top:1px;
			}
			.showDivMid{
				display: inline-block;
				width:10px;
				height: 10px;
				border-radius: 10px;
			}
			.showDivBottom{
				position: absolute;
				width: 100%;
				height: 40%;
				bottom:5px;
			}
			.circle-mid-span{
				display: inline-block;
				width: 20px;
				height: 20px;
				border-radius: 20px;
				position: absolute;
				top:85px;
				left:48px;
				background-color: green
				
			}
		</style>
	</head>

	<body>
		<div class="slide">
			<span class="slide-span">&lt;</span>
			<span class="slide-span">&gt;</span>

			<ul class="slide-ul" id="slide-ul">
				<span class="line"></span>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
				<li class="slide-li">
					<span class="circle-mid-span"></span>
				</li>
			</ul>
		</div>
		<script>
		$(document).ready(function(){
		var lineWidth = $(".slide ul li").width();
		$(".line").width((lineWidth * 9) + 'px');
		var count = 0;
		var historyList = [
			{
				YEAR_OK:1,
				year_number:2019
			},{
				YEAR_OK:0,
				year_time:'2019.04.23',
				operation:'移除管理员：张一'
			},{
				YEAR_OK:0,
				year_time:'2019.04.23',
				operation:'移除管理员：李二'
			},{
				YEAR_OK:0,
				year_time:'2019.04.23',
				operation:'移除管理员：王三'
			},{
				YEAR_OK:1,
				year_number:2018
			},{
				YEAR_OK:0,
				year_time:'2018.04.23',
				operation:'移除管理员：张四'
			},{
				YEAR_OK:0,
				year_time:'2018.04.23',
				operation:'移除管理员：张五'
			},{
				YEAR_OK:0,
				year_time:'2018.04.23',
				operation:'移除管理员：张六'
			},{
				YEAR_OK:0,
				year_time:'2018.04.23',
				operation:'移除管理员：张七'
			},{
				YEAR_OK:1,
				year_number:2017
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：张八'
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：张九'
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：张十'
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：十一'
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：十二'
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：十三'
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：十四'
			},{
				YEAR_OK:0,
				year_time:'2017.04.23',
				operation:'移除管理员：十五'
			}
		];
		timeSlide(historyList,count);


		function timeSlide(ayy,key){
			var allLiDom =  document.getElementsByClassName("slide-li");
			var j=0;
			for(var i=key;i<key+9;i++){
				if(ayy[i].YEAR_OK == 1){
					var newDIV = document.createElement("div");
					newDIV.setAttribute("class","circle-text");
					newDIV.style.color='#fff';
					newDIV.style.textAlign="center";
					newDIV.style.verticalAlign="middle";
					newDIV.style.lineHeight="75px";
					var newTEXT = document.createTextNode(ayy[i].year_number);
					newDIV.appendChild(newTEXT);
					allLiDom[j].appendChild(newDIV); 

				}else if(ayy[i].YEAR_OK == 0){
					var TopDIV = document.createElement("div");
					var createTopDiv = document.getElementsByClassName("slide-li")[j];
					TopDIV.setAttribute("class","showDivTop");
					TopDIV.style.color='black';
					TopDIV.style.textAlign="center";
					TopDIV.style.verticalAlign="middle";
					TopDIV.style.lineHeight="30px";
					TopDIV.style.marginTop="55px";
					TopDIV.style.width="100%";
					TopDIV.style.wordBreak="break-all";
					TopDIV.style.wordWrap="break-word";
					var TopdivTEXT = document.createTextNode(ayy[i].year_time);
					TopDIV.appendChild(TopdivTEXT);
					createTopDiv.appendChild(TopDIV);

					var bottomDIV = document.createElement("div");
					bottomDIV.setAttribute("class","showDivBottom");
					bottomDIV.style.color='black';
					bottomDIV.style.textAlign="center";
					bottomDIV.style.verticalAlign="middle";
					bottomDIV.style.lineHeight="30px";
					bottomDIV.style.width="100%";
					bottomDIV.style.marginTop="-180px";
					bottomDIV.style.wordBreak="break-all";
					bottomDIV.style.wordWrap="break-word";
					var bottomdivTEXT = document.createTextNode(ayy[i].operation);
					bottomDIV.appendChild(bottomdivTEXT);
					createTopDiv.appendChild(bottomDIV);

				}
				j++;
			}
		}
	
		var slideSpan = document.getElementsByClassName("slide-span");
		var allLiDel =  document.getElementsByClassName("slide-li");
		slideSpan[0].onclick = function(){
			$(".circle-text").css({'display':'none'});
			$(".showDivTop").css({'display':'none'});
			$(".showDivBottom").css({'display':'none'});
			count++;
			timeSlide(historyList,count);
		}
		slideSpan[1].onclick =function(){
			$(".circle-text").css({'display':'none'});
			$(".showDivTop").css({'display':'none'});
			$(".showDivBottom").css({'display':'none'});
			count--;
			timeSlide(historyList,count);
		}
		})
		</script>
	</body>
</html>